$(function () {
  $.ajax({
    type: "get",
    url: "https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js",
    data: {},
    dataType: "json",
    success: (res) => {
      //   console.log(res);
      // console.log(res.hero);
      //默认选择所有
      let roles = "all";
      const htmlStr = template("tmp", { list: res.hero, roles });
      $(".row").html(htmlStr);
      //导航点击事件
      $('[class="heroType"]').on("click", function () {
        console.log($(this).val());
        roles = $(this).val();
        const htmlStr = template("tmp", { list: res.hero, roles });
        $(".row").html(htmlStr);
      });
      //搜索事件
      let timeId;
      $("#searchHero").on("keyup", function () {
        const keyword = $(this).val().trim();
        // console.log(keyword);
        // console.log(res.hero[0].name.indexOf(keyword));
        if (timeId) clearTimeout(timeId);
        timeId = setTimeout(() => {
          const htmlStr = template("tmp", { list: res.hero, keyword });
          // console.log(htmlStr);
          $(".row").html(htmlStr);
        }, 1000);
      });
    },
  });
});
